<!DOCTYPE html>
<html>
<head>
<title>Single</title>
    {% load static %}
<link href="{% static "news/css/bootstrap.css" %}" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static "news/js/jquery.min.js" %}"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="{% static "news/css/style.css" %}" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Inspired Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script type="text/javascript" src="{% static "news/js/move-top.js" %}"></script>
<script type="text/javascript" src="{% static "news/js/easing.js" %}"></script>
				<script type="text/javascript">
					jQuery(document).ready(function($) {
						$(".scroll").click(function(event){		
							event.preventDefault();
							$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
						});
					});
					</script>

</head>
<body>
	<!--header-->
<div class="container">
	<div class="header">
		<div class="header-top">
			<div class="logo">
				<a href="{% url "NewsIndex" %}"><img src="{% static "news/images/logo.png" %}" alt="" ></a>
			</div>
			<div class="header-top-on">
				<ul class="social-in">
					<li><span>Share This Page:</span></li>
					<li><a href="#"><i> </i></a></li>						
					<li><a href="#"><i class="tin"> </i></a></li>
					<li><a href="#"><i class="message"> </i></a></li>
					<li><a href="#"><i class="youtube"> </i></a></li>
				</ul>
			</div>
				<div class="clearfix"> </div>
			</div>
			<!---->
			<div class="header-bottom">
				<div class="top-nav">
					<span class="menu"> </span>
					<ul>
						<li class="active" ><a href="{% url "NewsIndex" %}" >HOME  </a> </li>
						<li><a href="{% url "NewsEvents" %}" data-hover="EVENTS" > EVENTS</a></li>
						<li><a href="{% url "NewsSearch" %}" data-hover="SEARCH"> SEARCH </a></li>
						<li><a href="{% url "NewsCategory" %}" data-hover="CATEGORY"> CATEGORY</a></li>
						<li><a href="{% url "NewsRegister" %}" data-hover="REGISTER">REGISTER </a></li>
						{% if not user.is_authenticated %}
						<li><a href="{% url "NewsLogin" %}" data-hover="LOGIN">LOGIN </a></li>
                        {% else %}
                        <li><a href="{% url "user_logout" %}" data-hover="LOGOUT">LOGOUT </a></li>
                        {% endif %}
					</ul>
					<!--script-->
				<script>
					$("span.menu").click(function(){
						$(".top-nav ul").slideToggle(500, function(){
						});
					});
			</script>
				</div>
					<div class="search">
						<form action="{% url "NewsSearchView" %}" method="get">
							<input type="text" placeholder="Search" name="search">
							<input type="submit" value="">
						</form>
					</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
		<!---->
	<div class="container">
		<div class="single">
			<div class="col-md-9  single-top">
				<div class="text-in">					
						<div class="single-men">
							<img class="img-responsive" src="{{ MEDIA_URL }}{{ detail_info.image }}" alt="" />
							<h5>{{ detail_info.title }}</h5>
                            <p>来源：{{ detail_info.source }}  {{ detail_info.add_time }}</p>
                            <br>
							{{ detail_info.content|safe}}
						</div>
						<div class="comment-grid-top">
			<h3>{{ comments_info.count }} Responses</h3>
            {% for data in comments_info %}
			<div class="comments-top-top">
				<div class="top-comment-left">
					<img class="img-responsive" src="{% static "news/images/co.png" %}" alt="" />
				</div>
				<div class="top-comment-right">
					<ul>
						<li><span class="left-at"> {{ data.user }}</span></li>
						<li><span class="right-at">{{ data.add_time }}</span></li>
						<li><a class="reply" href="#">REPLY</a></li>
					</ul>
				<p>{{ data.comments }} </p>
				</div>
				<div class="clearfix"> </div>
			</div>
            {% endfor %}
{#			<div class="comments-top-top ">#}
{#				<div class="top-comment-left">#}
{#					<img class="img-responsive" src="{% static "news/images/co.png" %}" alt="" />#}
{#				</div>#}
{#				<div class="top-comment-right">#}
{#					<ul>#}
{#						<li><span class="left-at"> Admin</span></li>#}
{#						<li><span class="right-at">12 July 2014 at 10.30am</span></li>#}
{#						<li><a class="reply" href="#">REPLY</a></li>#}
{#					</ul>#}
{#				<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.The point of using Lorem Ipsum is that it has a more-or-less </p>#}
{#				</div>#}
{#				<div class="clearfix"> </div>#}
{#			</div>#}
		</div>
                <div class="comments-area">
                    {% if user.is_authenticated %}
                        <h3>Add New Comment</h3>
                        <form action="{% url "NewsCommentsView" %}" method="post">
                            {% csrf_token %}
                            <input type="hidden" value="{{ object.id }}" name="news_id">
                            {{ comment_form.comments }}
{#								<p>#}
{#									<span>Name</span>									#}
{#									<input type="text" value="">#}
{#								</p>#}
{#								<p>#}
{#									<span>Email</span>									#}
{#									<input type="text" value="">#}
{#								</p>#}
{#								<p>#}
{#									<span>Website</span>#}
{#									<input type="text" value="">#}
{#								</p>#}
{#								<p>#}
{#									<span>Subject</span>									#}
{#									<textarea></textarea>#}
{#								</p>#}
                            <div class="sub-in">
                                <input type="submit" value="Comment IT">
                    {% else %}
                        <br/>
                        <h3><a href="{% url "NewsLogin" %}">Please login and comment!</a></h3>
                    {% endif %}
                            </div>
                        </form>
                  </div>
				</div>
				
				
			</div>
				<div class="col-md-3 single-bottom">
                    <div class="store-right">
                        <h6> Category</h6>
                        <ul class="store-men">
                            {% for data in category %}
                            <li><a href="{% url "NewsCategoryList" data.name%}" name="military_science"><span></span>{{data.name}}</a></li>
                            {% endfor %}
{#                            <li><a href="#"><span> </span>Contrary to popular </a></li>#}
{#                            <li><a href="#"><span> </span>simply random text</a></li>#}
{#                            <li><a href="#"><span> </span> Lorem Ipsum passage </a></li>#}
{#                            <li><a href="#"><span> </span>undoubtable source </a></li>#}
{#                            <li><a href="#"><span> </span>Finibus Bonorum et</a></li>#}
{#                            <li class="last"><a href="#"><span> </span>word in classical literature </a></li>#}
                        </ul>
                    </div>
{#                    <div class="store-right">#}
{#                        <h6>Achievements</h6>#}
{#                        <ul class="store-men">#}
{#                            <li><a href="{% url "NewsSearchView" %}"><span> </span>April 2014 </a></li>#}
{#                            <li><a href="#"><span> </span>July 2014</a></li>#}
{#                            <li><a href="#"><span> </span> November 2014 </a></li>#}
{#                            <li  class="last"><a href="#"><span> </span>January 2015 </a></li>#}
{#                        </ul>#}
{#                    </div>#}
                </div>
				<div class="clearfix"> </div>
		</div>
	</div>
	
		<!---->
	
		<div class="container">
		<div class="footer">
			<div class="footer-top">
				<div class="col-md-4 amet-sed">
				<h4>navigation</h4>
				<i class="line"> </i>
					<ul class="nav-bottom">
						<li  ><a href="{% url "NewsIndex" %}" >HOME  </a> </li>
						<li><a href="{% url "NewsEvents" %}" > EVENTS</a></li>
						<li><a href="{% url "NewsSearch" %}"> SEARCH </a></li>
						<li><a href="{% url "NewsCategory" %}" > CATEGORY</a></li>
						<li><a href="{% url "NewsRegister" %}">REGISTER </a></li>
						{% if not user.is_authenticated %}
						<li><a href="{% url "NewsLogin" %}">LOGIN </a></li>
                        {% else %}
                        <li><a href="{% url "user_logout" %}">LOGOUT </a></li>
                        {% endif %}
						<li  ><a href="#" >RSVP</a> </li>
						<li><a href="#" >PRIVACY POLICY</a></li>
					</ul>
				</div>
				<div class="col-md-4 amet-sed ">
				<h4>get in touch</h4>
				<i class="line"> </i>
					<ul class="nav-bottom">
						<li  ><a href="{% url "NewsContact" %}" >CONTACT US</a> </li>
						<li><a href="#" >PRIVACY POLICY</a></li>
						<li><a href="#">TERMS &amp; CONDITIONS </a></li>					
					</ul>
					<p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
				</div>
				<div class="col-md-4 amet-sed ">
				<h4>share this page</h4>
				<i class="line"> </i>
				<ul class="social-in msg-social">
					<li><a href="#"><i> </i></a></li>						
					<li><a href="#"><i class="tin"> </i></a></li>
					<li><a href="#"><i class="message"> </i></a></li>
					<li><a href="#"><i class="youtube"> </i></a></li>
				</ul>
				<p>follow us on twitter:<a href="#">@example</a></p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		 <script type="text/javascript">
						$(document).ready(function() {
							/*
							var defaults = {
					  			containerID: 'toTop', // fading element id
								containerHoverID: 'toTopHover', // fading element hover id
								scrollSpeed: 1200,
								easingType: 'linear' 
					 		};
							*/
							
							$().UItoTop({ easingType: 'easeOutQuart' });
							
						});
					</script>
				<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	</div>
</body>
</html>